<template>
  <div>
    <div class="header">
      <header class="navbar">
        <!-- 左侧导航栏 -->
        <div class="navbar-left">
          <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" :ellipsis="false"
            @select="handleSelect">
            <div class="navbar-logo" @click="logoClickEvent">
              <img src="@/assets/images/logo.png" alt="LOGO">
            </div>
            <el-menu-item v-for="item in navbarItemList" :key="item.name" :index="item.index"
              @click="navbarRouterFunc(item.name)">
              <a :href="item.url" @click.prevent>{{ item.label }}</a>
            </el-menu-item>
          </el-menu>
        </div>
        <!-- 右侧用户头像  登录注册 -->
        <div class="navbar-right">
          <el-button type="primary" round size="large" @click="toLoginView" v-if="useUser.token === ''">登录 |
            注册</el-button>
          <div class="avatar" v-if="useUser.token !== ''">
            <!-- 聊天跳转 -->
            <div class="chat-box" @click="handleClickChant">
              <el-icon>
                <Message />
              </el-icon>
            </div>
            <!-- 头像和弹出框 -->
            <Popover></Popover>
            <span>{{ username }}</span>
          </div>
        </div>
      </header>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, toRefs, onMounted, watch, defineAsyncComponent } from "vue"
import { useRoute, useRouter } from 'vue-router'
import {
  Message
} from '@element-plus/icons-vue'
import { navbarItem } from './type'
// import Popover from './components/Popover/index.vue'
import { useUserStore } from '@/store/user'
const useUser = useUserStore();

const route = useRoute()
const router = useRouter()

// 导航栏动态渲染 =========================
const activeIndex = ref('1')
// 导航栏列表
const navbarItemList: navbarItem[] = reactive([
  {
    label: '首页',
    name: 'Index',
    index: '1',
    enable: true,
    url: 'http://127.0.0.1:5064/'
  },
  {
    label: '代码橱窗',
    name: 'CodeTrade',
    index: '2',
    enable: true,
    url: 'http://127.0.0.1:5064/CodeTrade/'
  },
  {
    label: '需求委托',
    name: 'CodeEntrust',
    index: '3',
    enable: true,
    url: 'http://127.0.0.1:5064/CodeEntrust/'
  },
  {
    label: '交流讨论',
    name: 'Communication',
    index: '4',
    enable: true,
    url: 'http://127.0.0.1:5064/Communication/'
  }
])
// 导航栏路由
const navbarRouterFunc = (routeName: string = '') => {
  router.push({
    name: routeName,
  })
}
const handleSelect = (key: string, keyPath: string[]) => {
  // 存储navbar激活状态
  sessionStorage.setItem('navbarActive', key)
}

const handleClickChant = () => {
  router.push({
    name: 'Chat',
  })
}

// 跳转登录页面方法
const toLoginView = () => {
  console.log('跳转到login')
  router.push({
    name: 'Login',
  })
}

// Logo点击事件
const logoClickEvent = () => {
  console.log('跳转到index')
  router.push({
    name: 'Index',
  })
}



// 异步组件 Navbar显示用户信息
const Popover: any = defineAsyncComponent(() => {
  return new Promise((resolve, reject) => {
    ; (async function () {
      try {
        // await time(2000)
        const res: any = await import('./components/Popover/index.vue')
        resolve(res)
      } catch (error) {
        reject(error)
      }
    })()
  })
})

const username = ref(localStorage.getItem('username'))

onMounted(() => {
  // 导航栏激活状态
  activeIndex.value = sessionStorage.getItem('navbarActive') ?? '1';
})

</script>

<style lang="less" scoped>
@border-color: #dcdfe6; //边框默认颜色

.header {
  width: 100%;
  background-color: #ffffff;

  .navbar {
    display: flex;
    justify-content: space-between;
    height: 60px;
    border-bottom: 2px solid @border-color;

    .navbar-left {
      flex: 1;

      :deep(.el-menu--horizontal) {
        border: 0;
      }

      .navbar-logo {
        display: flex;
        align-items: center;
        border: 2px solid @border-color;
        border-bottom: none;

        img {
          width: 179px;
          vertical-align: middle;
        }
      }
    }

    .navbar-right {
      display: flex;
      // flex-direction: row-reverse;
      // justify-content: space-around;
      align-items: center;
      width: 200px;

      .avatar {
        height: 40px;
        width: 40px;
        display: flex;
        align-items: center;

        .chat-box {
          width: 50px;
          font-size: 25px;
          padding-top: 10px;
          padding-right: 10px;
          align-items: center;
        }

        span {
          font-weight: 700;
          display: block;
          padding-left: 10px;
        }
      }
    }
  }
}
</style>